<template>
  <div>
    <el-form :model="form">
        form:{{form}}
       
        <el-form-item label="规格名称" label-width="120px" :rules="[
      { required: true}]">
          <el-input v-model="form.specsname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item v-for="(item,index) in attr_Arr" :key="index" label="规格属性" label-width="120px">
          <div class="line">
            <el-input v-model="item.val" autocomplete="off"></el-input>
            <el-button type="primary" v-if="index===0" @click="attr_Arr.push({val:''})">新增规格属性</el-button>
            <el-button type="danger" v-else @click="attr_Arr.splice(index,1)">删除</el-button>
          </div>
        </el-form-item>
        <el-form-item label="状态" label-width="120px">
          <el-switch v-model="form.status" :active-value="1" :inactive-value="2"></el-switch>
        </el-form-item>
        <el-form-item label-width="120px">
          <el-button type="primary" @click="commit">{{$route.path == '/specs/add'? '添加':'修改'}}</el-button>
        </el-form-item>

      </el-form>
      
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import {reqspecsadd,reqspecsedit,reqspecsinfo} from '../../../http/api';
import { successAlert,errorAlert } from '../../../utils/alert';
export default {
  computed: {
    ...mapGetters({
      specs_Arr:'specs_Arr'
    })
  },
  data() {
    return {
        form:{
        specsname: "",
        attrs: "",
        status: 1
      },
      attr_Arr:[{val:''},{ val:''}]
    }
  },
  activated() {
    this.set_specsArr();
    if(this.$route.path !== "/specs/add"){
      // console.log(this.$route);
      reqspecsinfo({ id:this.$route.params.id }).then((res) => {
            if (res.data.code === 200) {
                this.form = res.data.list[0];
                this.attr_Arr = this.form.attrs.map(item=>({val:item}));
            }
        }).catch((err) => {
            console.log('请求失败-----err:' + err);
        })
    }
  },
  beforeRouteLeave(to,from,next){
    // console.log(to,from);
    if(from.path !== '/specs/add'){
        this.form = {
        specsname: "",
        attrs: "",
        status: 1
      },
      this.attr_Arr = [{val:''},{ val:''}];
    };
    next()
    },
  
  methods: {
    ...mapActions({
      set_specsArr:'specs/set_specsArr'
    }),
   commit(){
     // 验证
      if (this.form.specsname === "") {
        errorAlert("规格名称不能为空");
        return;
      }
      if (this.attr_Arr.some(item => item.val === "")) {
        errorAlert("所有的规格属性均不能为空");
        return;
      }

      // arr=[ { "val": "S" }, { "val": "S" },{val:"L"} ]--["S","S","L"]
      let arr2 = this.attr_Arr.map(item => item.val); //["S","S","L"]
      let newArr = Array.from(new Set(arr2));
      if (newArr.length < this.attr_Arr.length) {
        errorAlert("规格属性不能有相同的选项");
        return;
      }
     this.form.attrs = this.attr_Arr.map(item => item.val).join(",");
     if(this.$route.path === '/specs/add'){
       reqspecsadd(this.form).then(res => {
        if(res.data.code===200){
          //弹成功
          successAlert(res.data.msg);
          this.form = {
        specsname: "",
        attrs: "",
        status: 1
      },
      this.attr_Arr = [{val:''},{ val:''}];
          //返回菜单管理
          this.$router.push('/specs');
        }
      })
     }else{
       this.form.id = this.$route.params.id;
       reqspecsedit(this.form).then(res => {
        if(res.data.code===200){
          //弹成功
          successAlert(res.data.msg);
          //返回菜单管理
          this.$router.push('/specs');
        }
      })
     }
   }
  }
};
</script>
<style scoped lang="less">
@import url('../../../less/index.less');
.line{
  display: flex;
  button{
    padding: @padding10;
  }
  input{
    flex: 1;
  }
}
</style>